var Character = Backbone.Model.extend({
	defaults: {
		name:				null,
		active:			false
	},

	initialize: function(){
		this.bind('change:name', function(){
			console.log('character set active state to: ' + this.get('active'));
		});
	}
});

var CharacterCollection = Backbone.Collection.extend({
	model: Character
});

var FormCharacterView = Backbone.View.extend({
	el:				$("#sidebar-right"),
	template: _.template($("#view-frm-character-item").html()),

	events: {
	},

	initialize: function(){
		_.bindAll(this, 'render');
	},

	render: function(){
    $(this.el).append(this.template());
		return this;
	}
});

var CharacterView = Backbone.View.extend({
	template: _.template($("#view-character-item").html()),

	/**
	 * Event-Listener fuer Elemente festlegen
	 * @var object events
	 */
	events: {
		'mouseover':  'setFocus',
		'mouseout':		'unsetFocus',
		'click':			'setActive'
	},

	initialize: function(){
		_.bindAll(this, 'render');
	},

	render: function(){

		vars = { name: "Jason" };

    $(this.el).append(this.template(vars));
		return this;
	},

	setFocus: function() {
		$(this.el).addClass('hover');
		return this;
	},

	unsetFocus: function() {
		$(this.el).removeClass('hover');
		return this;
	},

	setActive: function() {
		$(this.el).addClass('active');
		return this;
	},

	unsetActive: function() {
		$(this.el).removeClass('active');
		return this;
	}
});

var CharacterCollectionView = Backbone.View.extend({

	/**
	 * Root-Element, in dass alle Kindobjekte geschrieben werden
	 * @var html node el
	 */
	el: $('#character-collection'),

	/**
	 * Sammlung der benutzten Character
	 * @var <CharacterCollection> _characterCollection
	 */
	_characterCollection:	null,

	/**
	 * Konstruktor der Klasse CharacterCollectionView
	 * @param none
	 * @return <CharacterCollectionView> Objekt auf sich selbst
	 */
	initialize: function() {
		_.bindAll(this, 'render', 'initializeCharacterCollection');
		return this;
	},

	/**
	 * initialisiert die Daten der benutzten Character
	 * @param none
	 * @return none
	 * @todo die Daten hierfuer sollten entweder aus einem JSON-Stream oder dem LocalStorage
	 *	stammen
	 */
	initializeCharacterCollection: function() {
		this._characterCollection = new CharacterCollection();

		heavy = new Character();
		heavy.set({
			_id:		1,
			_name:	'John Doe'
		});
		this._characterCollection.add(heavy);

		return this;
	},

	/**
	 * erzeugt die HTML-Struktur fuer die Character-Sammlung
	 * @param none
	 * @return none
	 */
	render: function() {
		var self = this;

		// Liste erzeugen und Character in die Liste einfuegen
		$(this.el).append('<ul></ul>');

		_(this._characterCollection.models).each(function(character) {
			self.append(character);
		}, this);
	},

	append: function(character) {
		var characterView = new CharacterView({
			model: character
		});

		$('ul', this.el).append(characterView.render().el);
	}
});

//characterCollectionView = new CharacterCollectionView();
//characterCollectionView
//	.initializeCharacterCollection()
//	.render();

//formCharacterView	= new FormCharacterView();
//formCharacterView.render();

unit = new Character({
	name: 'John Doe'
});